<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" active-color="#1893FC" bar-width="150"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{'height': windowHeight + 'px'}">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<video :src="videoPath" controls v-if="videoPath" width="100%" autoplay="true"></video>
					<view class="content">
						<view class="panel">
							<label class="n-input">
								<text>案件编号</text>
								<u-input v-model="form.bianhao" inputAlign="right" placeholder="请输入案件编号"></u-input>
							</label>
							<label class="n-input">
								<text>案件来源</text>
								<u-input v-model="form.laiyuan" inputAlign="right" placeholder="请输入案件来源"></u-input>
							</label>
							<label class="n-input">
								<text>案件类型</text>
								<picker @change="bindPickerChange" :value="form.leixing" :range="array">
									<view class="uni-input noValue" v-if="typeof form.leixing === 'string'">请选择案件类型</view>
									<view class="uni-input" v-else>{{array[form.leixing]}}</view>
								</picker>
							</label>
							<label class="n-input">
								<text>案件类别</text>
								<view class="n-input-right">
									<u-radio-group v-model="form.leibie" @change="radioGroupChange">
										<u-radio 
											@change="radioChange" 
											v-for="(item, index) in radioList" :key="index" 
											:name="item.name"
											:disabled="item.disabled"
											active-color="#1893FC"
										>
											{{item.name}}
										</u-radio>
									</u-radio-group>
								</view>
							</label>
							<label class="n-input">
								<text>案由</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.anyou" :autoHeight="true" placeholder="请输入案由" inputAlign="right"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>案件描述</text>
								<view class="n-input-right">
									<u-input type="textarea" v-model="form.miaoshu" :autoHeight="true" placeholder="请输入案件描述" inputAlign="right"></u-input>
								</view>
							</label>
							<label class="n-input">
								<text>执法人</text>
								<u-input v-model="form.zhifaren" inputAlign="right" placeholder="请输入执法人"></u-input>
							</label>
							<label class="n-input">
								<text>执法证件号</text>
								<u-input v-model="form.zhifarenCode" inputAlign="right" placeholder="请输入执法证件号"></u-input>
							</label>
						</view>
						<u-gap height="30"></u-gap>
						<u-button shape="circle" type="primary" plain ripple @click="next">下一步</u-button>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y :style="{'height': windowHeight + 'px'}" @scrolltolower="onreachBottom">
					<view class="content">
						<template v-for="(item, index) in form.dangshirenList">
							<view class="panel" :key="index">
								<label class="n-input" @click="dangshirenIndex(index)">
									<text>当事人类型</text>
									<picker @change="dangshirenChange" :value="item.leixing" :range="dangshirenTypeList">
										<view class="uni-input noValue" v-if="typeof item.leixing === 'string'">请选择案件类型</view>
										<view class="uni-input" v-else>{{dangshirenTypeList[item.leixing]}}</view>
									</picker>
								</label>
								<label class="n-input">
									<text>当事人</text>
									<u-input v-model="item.dangshiren" inputAlign="right" placeholder="请输入当事人姓名"></u-input>
								</label>
								<label class="n-input" @click="dangshirenIndex(index)">
									<text>证件类型</text>
									<picker @change="cardTypeChange" :value="item.cardType" :range="cardTypeList">
										<view class="uni-input noValue" v-if="typeof item.cardType === 'string'">请选择证件类型</view>
										<view class="uni-input" v-else>{{cardTypeList[item.cardType]}}</view>
									</picker>
								</label>
								<label class="n-input">
									<text>证件号</text>
									<u-input v-model="item.dangshiren" inputAlign="right" placeholder="请输入证件号码"></u-input>
								</label>
								<label class="n-input">
									<text>联系电话</text>
									<u-input v-model="item.dangshiren" inputAlign="right" placeholder="请输入联系电话"></u-input>
								</label>
								<label class="n-input">
									<text>联系地址</text>
									<u-input v-model="item.dangshiren" inputAlign="right" placeholder="请输入联系地址"></u-input>
								</label>
							</view>
							<u-gap height="30"></u-gap>
						</template>
						<view class="btns">
							<view><u-button shape="circle" type="primary" plain ripple @click="addDangshiren">添加当事人</u-button></view>
							<view><u-button shape="circle" type="primary" ripple @click="submit">提  交</u-button></view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '基本信息'
				}, {
					name: '当事人信息'
				}],
				labelWidth: 150,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				radioList: [{
					name: '简易',
					disabled: false
				}, {
					name: '一般',
					disabled: false
				}, {
					name: '重大',
					disabled: false
				}],
				windowHeight: '',
				array: ['类型一', '类型二', '类型三', '类型四'],
				dangshirenTypeList: ['类型一', '类型二', '类型三', '类型四'],
				cardTypeList: ['身份证号', '军官证', '学生证'],
				form: {
					bianhao: '',
					laiyuan: '',
					leixing: '',
					leibie: '',
					anyou: '',
					miaoshu: '',
					zhifaren: '',
					zhifarenCode: '',
					dangshirenList: [{
						leixing: '',
						dangshiren: '',
						cardType: '',
						cardId: '',
						phone: '',
						add: ''
					}]
				},
				dangshirenNum: 0,
				videoPath: ''
			};
		},
		onLoad() {
			this.getSystemHeight()
			const videoPath = uni.getStorageSync('videoPath')
			if(videoPath) {
				this.videoPath = videoPath
				uni.setNavigationBarTitle({
					title: '现场取证'
				})
			}
			this.videoPath = videoPath ? videoPath : ''
		},
		methods: {
			addDangshiren: function() {
				const dangshiren = {
					leixing: '',
					dangshiren: '',
					cardType: '',
					cardId: '',
					phone: '',
					add: ''
				}
				this.form.dangshirenList.push(dangshiren)
			},
			next: function() {
				this.current = 1
				this.swiperCurrent = 1
			},
			dangshirenIndex: function(index) {
				this.dangshirenNum = index
			},
			cardTypeChange: function(e) {
				this.form.dangshirenList[this.dangshirenNum].cardType = e.target.value
			},
			dangshirenChange: function(e) {
				this.form.dangshirenList[this.dangshirenNum].leixing = e.target.value
			},
			bindPickerChange: function(e) {
				this.form.leixing = e.target.value
			},
			getSystemHeight: function() {
				const res = uni.getSystemInfoSync()
				console.log(res)
				this.windowHeight = res.windowHeight - res.windowTop
			},
			submit: function() {
				uni.removeStorageSync('videoPath')
				uni.navigateTo({
					url: '/pages/caseEntry/caseEntry'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	margin: 20rpx;
}
.panel {
	border-radius: 10rpx; background: #FFFFFF; padding: 0 20rpx;
}
.n-input {
	display: flex; align-items: center; border-bottom: 1px solid rgba($color: #000000, $alpha: .06); padding: 10rpx; width: 100%; box-sizing: border-box;
	text {
		color: rgba($color: #000000, $alpha: 0.5); width: 150rpx;
	}
	uni-picker {
		flex: 1; text-align: right; height: 70rpx;
		.uni-input {
			line-height: 70rpx;
			&.noValue {
				color: rgba($color: #000000, $alpha: 0.3);
			}
		}
		
	}
	.n-input-right {
		flex: 1; text-align: right;
	}
}
.btns {
	display: flex;
	view {
		flex: 1;
		&:nth-child(1) {
			margin-right: 20rpx;
		}
	}
}
video {
	width: 100%;
}
</style>
